<template>
	<view class="home">
		<!-- 		<web-view  src="https://www.yuque.com/huodaduduhuo/zw1yi9/fq8vlp9hxx94gx4f?view=doc_embed&from=asite"></web-view> -->
		<view class="imfflx">
			<image class="img" :src="productList.qrCode" mode=""></image>
		</view>
		<view class="item">
			<text class="tie">设备名称：</text>
			<text class="text">{{productList.nickName}}</text>
		</view>
		<view class="item">
			<text class="tie">IMEI：</text>
			<text class="text">{{productList.imei}}</text>
		</view>
		<view class="item_p">
			<view class="titit">测点名称：</view>
			<u--input placeholder="请输入测点名称" border="surround" v-model="remarksName"></u--input>
		</view>
		<view class="item_p">
			<view class="titit">选择站点：</view>
			<uni-data-select :localdata="range" @change="changeselectFn"></uni-data-select>
		</view>
		<view class="item_p">
			<view class="titit">选择项目：</view>
			<uni-data-select placeholder="先选择站点" :localdata="measurementList" @change="measurementListFn"></uni-data-select>
		</view>
		<!-- 弹窗 -->
		<u-modal :show="modalshow" showCancelButton @confirm="modalconfirm" @cancel="modalcancel">
			<view class="">
				<text style="font-size: 40rpx;">是否绑定到</text>
				<!-- <text style="font-size: 50rpx;color: #00aa7f;">{{zhandian}}</text> -->
				<text style="font-size: 40rpx;">站点</text>
			</view>
		</u-modal>
		<view class="" style="margin-top: 400rpx;">
			<u-button :disabled="disabled" type="primary" shape="circle" text="绑定站点" @click="but"></u-button>
		</view>
		<!-- 扫码自动弹窗 -->
		<u-modal :show="devModal" showCancelButton :content='devcontent' @confirm="devconfirm"
			@cancel="devcancel"></u-modal>
		<!-- 弹窗 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		createLogger
	} from 'vuex'
	export default {
		data() {
			return {
				range: [],
				remarksName: '',
				devModal: false,
				devcontent: '是否添加设备',
				modalshow: false,
				zhandian: '选择站点',
				productList: {},
				project: null,
				show: false,
				disabled: false,
				ssId: null,
				miId: null,
				did: null,
				measurementList: []
			}
		},
		onLoad(option) {
			this.did = option.id
			this.productListFn(option.id) //设备详情
			this.projectFn() // 站点列表
			
		},
		methods: {
			// 选择站点
			changeselectFn(e) {
				console.log('eeee',e);
				this.ssId = e
				this.projectmeasurementFn(e) // 项目列表
			},
			// 选择项目
			measurementListFn(e) {
				this.miId = e
			},
			//扫码确认
			devconfirm() {
				this.devModal = false
				this.addPhoneFn()
			},
			//扫码取消
			devcancel() {
				this.devModal = false
				uni.navigateBack({
					delta: 1
				});
			},
			but() {
				if (this.ssId == null || this.miId == null || this.did == null || this.remarksName == '') {
					uni.showToast({
						title: '未填写完整',
						duration: 1000
					});
					return
				}
				this.modalshow = true
			},
			// 弹窗确定
			modalconfirm() {
				this.bindProjectFn()
				this.modalshow = false
			},
			// 弹窗取消
			modalcancel() {
				this.modalshow = false
			},
			// 绑定站点
			bindProjectFn() {
				uni.$u.http.post('/device/surveyStationDevice/add', {
					"ssId": this.ssId,
					"miId": this.miId,
					"did": this.did,
					"remarksName": this.remarksName,
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							duration: 1000
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1100)
					}else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: res.msg
						})
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 设备详情
			productListFn(id) {
				uni.$u.http.get('/device/device/getInfoPhone/' + id).then(res => {
					if (res.code == 200) {
						this.productList = res.data
					} else {
						uni.reLaunch({
							url: '/pages/home/login'
						});
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 站点列表
			projectFn() {
				uni.$u.http.get('/device/survey_station/list').then(res => {

					if (res.code == 200) {
						this.range = res.rows.map((i) => {
							return {
								value: i.id,
								text: i.surveyStationName
							}
						})

					} else {
						uni.reLaunch({
							url: '/pages/home/login'
						});
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 项目列表
			projectmeasurementFn(id) {
				uni.$u.http.get('/device/survey_station/getInfo/' + id).then(res => {

					if (res.code == 200) {
						console.log('res',res);
						this.measurementList = res.data.measurementItemList.map((i) => {
							return {
								value: i.id,
								text: i.measurementName
							}
						})

					} else {
						// uni.reLaunch({
						// 	url: '/pages/home/login'
						// });
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// projectmeasurementFn() {
			// 	uni.$u.http.get('/device/measurement_item/list').then(res => {

			// 		if (res.code == 200) {
			// 			this.measurementList = res.rows.map((i) => {
			// 				return {
			// 					value: i.id,
			// 					text: i.measurementName
			// 				}
			// 			})

			// 		} else {
			// 			uni.reLaunch({
			// 				url: '/pages/home/login'
			// 			});
			// 		}
			// 	}).catch(err => {
			// 		console.log('错误', err);
			// 	})
			// },
		}
	}
</script>
<style scoped lang="scss">
	.home {
		margin: 0 auto;
		width: 700rpx;

		.imfflx {
			display: flex;
			justify-content: center;
			align-items: center;

			.img {
				width: 260rpx;
				height: 260rpx;
				// background-color: #1d1d1d;
				padding: 20rpx;

			}
		}


		.item {
			background-color: #f8f8f8;
			margin: 10rpx;
			padding: 20rpx;
			border-radius: 20rpx;

			.tie {
				font-size: 40rpx;
				color: #4f4f4f;
			}

			.text {
				font-size: 50rpx;
				color: #1d1d1d;
			}
		}

		.item_p {
			background-color: #f8f8f8;
			margin: 10rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.titit {
				font-size: 40rpx;
				color: #4f4f4f;
			}
		}
	}
</style>
<style>
	page {
		background-color: #ffffff;
	}
</style>